<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- 移动端视口标签 -->
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 样式初始化 -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/index.css">
  <!-- mint-ui 样式 -->
  <link rel="stylesheet" href="css/mint-ui.css">
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

  <!-- 引入 flexible.js 文件,将屏幕划分 10 等份 -->
  <script src="js/flexible.js"></script>
  <script src="js/vue.js"></script>
  <!-- mint-ui 组件库 -->
  <script src="js/mint-ui.js"></script>
  <!-- Swiper JS -->
  <script src="./js/swiper.min.js"></script>
  <script src="./js/dayjs.min.js"></script>
  <title>my_suning</title>
</head>

<body>
  <div id="app">
    <div class="nav-wrapper">
      <div class="index-nav" :class="{ 'index-nav-fixed': isFixed }">
        <!-- 导航栏背景 -->
        <div class="nav-bg">
          <img src="upload/nav-bg.jpg" alt="">
        </div>
        <!-- 顶部导航栏 -->
        <div class="top-type">
          <div class="top-content">
            <a href="#" class="class">
              <img src="images/class.png" alt="">
            </a>
            <div class="top-head">
              <a href="#">
                <img src="upload/head.gif" alt="">
              </a>
            </div>
            <a href="#" class="login">
              <img src="images/login.png" alt="">
            </a>
          </div>
          <div class="search-bar">
            <div style="position: relative;">
              <a href="#"></a>
              <i class="search-icon"></i>
              <form action="" style="height: 1.173333rem;">
                <input type="search" placeholder="双十一 爆款5折抢" class="search-input">
              </form>
            </div>
          </div>
        </div>
        <!-- 固定导航栏 -->
        <div class="fixed-type">
          <div class="fixed-content">
            <a href="#" class="class">
              <img src="images/class.png" alt="">
            </a>
            <div class="search-bar" style="padding: 0; width: 6.96rem;height: 1.173333rem;">
              <div style="position: relative; width: 6.96rem;">
                <a href="#"></a>
                <i class="search-icon"></i>
                <form action="" style="height: 1.173333rem;">
                  <input type="search" placeholder="双十一 爆款5折抢" class="search-input">
                </form>
              </div>
            </div>
            <a href="#" class="login">
              <img src="images/login.png" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="index-wrap">
      <!-- banner -->
      <div class="banner">
        <img src="images/banner-bg.jpg" alt="">
        <div class="swipe-wrapper">
          <mt-swipe :auto="4000">
            <mt-swipe-item>
              <a href="#">
                <img class="b-image" src="upload/b-image1.jpg" alt="">
                <img class="b-logo" src="upload/b-logo.png" alt="">
              </a>
            </mt-swipe-item>
            <mt-swipe-item>
              <a href="#">
                <img class="b-image" src="upload/b-image2.jpg" alt="">
                <img class="b-logo" src="upload/b-logo.png" alt="">
              </a>
            </mt-swipe-item>
            <mt-swipe-item>
              <a href="#">
                <img class="b-image" src="upload/b-image3.jpg" alt="">
                <img class="b-logo" src="upload/b-logo.png" alt="">
              </a>
            </mt-swipe-item>
            <mt-swipe-item>
              <a href="#">
                <img class="b-image" src="upload/b-image4.jpg" alt="">
                <img class="b-logo" src="upload/b-logo.png" alt="">
              </a>
            </mt-swipe-item>
            <mt-swipe-item>
              <a href="#">
                <img class="b-image" src="upload/b-image5.jpg" alt="">
                <img class="b-logo" src="upload/b-logo.png" alt="">
              </a>
            </mt-swipe-item>
            <mt-swipe-item>
              <a href="#">
                <img class="b-image" src="upload/b-image6.png" alt="">
                <img class="b-logo" src="upload/b-logo.png" alt="">
              </a>
            </mt-swipe-item>
            <mt-swipe-item>
              <a href="#">
                <img class="b-image" src="upload/b-image7.jpg" alt="">
                <img class="b-logo" src="upload/b-logo.png" alt="">
              </a>
            </mt-swipe-item>
            <mt-swipe-item>
              <a href="#">
                <img class="b-image" src="upload/b-image8.jpg" alt="">
                <img class="b-logo" src="upload/b-logo.png" alt="">
              </a>
            </mt-swipe-item>
          </mt-swipe>
        </div>
      </div>
      <!-- hor-view -->
      <div class="hor-view">
        <a href="#"><img src="upload/hor-view.webp" alt=""></a>
      </div>
      <!-- enter-list -->
      <div class="enter-list">
        <div class="enter-wrapper">
          <ul>
            <li>
              <a href="#">
                <img src="images/enter-img1.png" alt="">
                <span>苏宁秒杀</span>
              </a>
              <a href="#">
                <img src="images/enter-img2.png" alt="">
                <span>苏宁超市</span>
              </a>
              <a href="#">
                <img src="images/enter-img3.png" alt="">
                <span>苏宁拼购</span>
              </a>
              <a href="#">
                <img src="images/enter-img4.png" alt="">
                <span>手机数码</span>
              </a>
              <a href="#">
                <img src="images/enter-img5.png" alt="">
                <span>苏宁家电</span>
              </a>
              <a href="#">
                <img src="images/enter-img6.png" alt="">
                <span>免费水果</span>
              </a>
              <a href="#">
                <img src="images/enter-img7.png" alt="">
                <span>super会员</span>
              </a>
              <a href="#">
                <img src="images/enter-img8.png" alt="">
                <span>签到有礼</span>
              </a>
              <a href="#">
                <img src="images/enter-img9.png" alt="">
                <span>领券中心</span>
              </a>
              <a href="#">
                <img src="images/enter-img10.png" alt="">
                <span>更多频道</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 新人优惠 -->
      <div class="new">
        <a href="#" style="width: 50%;padding-right: .026667rem;">
          <img src="upload/big-new.jpg" alt="">
        </a>
        <a href="#" style="width: 25%;">
          <img src="upload/small-new1.png" alt="">
        </a>
        <a href="#" style="width: 25%;padding-left: .026667rem;">
          <img src="upload/small-new2.png" alt="">
        </a>
      </div>
      <!-- 留空 -->
      <div class="blank"></div>
      <!-- 限时秒杀、大聚惠 -->
      <div class="big-box1">
        <div class="seckill">
          <a href="#">
            <div class="title-wrap">
              <div class="title">限时秒杀</div>
              <div class="count" v-cloak>
                <span class="hour">{{h}}</span>:<span class="minute">{{m}}</span>:<span class="second">{{s}}</span>
              </div>
            </div>
            <p class="desc">人气好货限时抢</p>
          </a>
          <a class="img-wrapper" href="#">
            <img src="upload/goods1.jpg" alt="">
          </a>
          <a class="img-wrapper right-wrapper" href="#">
            <img src="upload/goods2.jpg" alt="">
          </a>
        </div>
        <div class="bigdiscount">
          <a href="#">
            <div class="title-wrap">
              <div class="title">大聚惠</div>
            </div>
            <p class="desc">聚优品 · 惠生活</p>
          </a>
          <a class="img-wrapper" href="#">
            <img src="upload/goods3.webp" alt="">
            <p class="img-desc">Apple</p>
          </a>
          <a class="img-wrapper right-wrapper" href="#">
            <img src="upload/goods4.webp" alt="">
            <p class="img-desc">维达(Vinda)</p>
          </a>
        </div>
      </div>
      <!-- 灰色间隔条 -->
      <div class="space"></div>
      <!-- 新品首发、苏宁拼购 -->
      <div class="big-box2">
        <div class="new-launch">
          <a href="#">
            <div class="title-wrap">
              <div class="title">新品首发</div>
            </div>
            <p class="desc">大牌新机0元试</p>
          </a>
          <a class="img-wrapper" href="#">
            <img src="upload/goods5.webp" alt="">
          </a>
          <a class="img-wrapper right-wrapper" href="#">
            <img src="upload/goods6.webp" alt="">
          </a>
        </div>
        <div>
          <a href="#">
            <div class="title-wrap">
              <div class="title">苏宁拼购</div>
            </div>
            <p class="desc">2人拼更实惠 全场包邮</p>
          </a>
          <a class="img-wrapper" href="#">
            <img src="upload/goods7.webp" alt="">
            <p class="img-desc">2人拼640</p>
          </a>
          <a class="img-wrapper right-wrapper" href="#">
            <img src="upload/goods8.webp" alt="">
            <p class="img-desc">2人拼115.99</p>
          </a>
        </div>
      </div>
      <!-- 灰色间隔条 -->
      <div class="space"></div>
      <!-- 为您推荐 -->
      <div class="for-you">
        <div class="left-title">
          <a href="#">
            <p>为您推荐</p>
            <p>精选频道</p>
          </a>
        </div>
        <div class="right-items">
          <div class="item">
            <a href="#">
              <img src="upload/item1.webp" alt="" style="margin-left: .14rem;">
              <p>苏宁国际</p>
            </a>
          </div>
          <div class="item">
            <a href="#">
              <img src="upload/item2.webp" alt="">
              <p>苏宁Outlets</p>
            </a>
          </div>
          <div class="item">
            <a href="#">
              <img src="upload/item3.png" alt="">
              <p>会员抢购</p>
            </a>
          </div>
          <div class="item">
            <a href="#">
              <img src="upload/item4.png" alt="">
              <p>Super会员</p>
            </a>
          </div>
        </div>
      </div>
      <!-- 大促 -->
      <div class="promotion">
        <div>
          <div class="hc-wrapper">
            <div class="hc-item">
              <a href="#">
                <img src="upload/promot-bg1.png" alt="">
                <img src="upload/promot-item1.webp" alt="" style="left: .18rem;">
                <p>冰洗钜惠</p>
                <p style="color: #E244AA;">
                  <span>每千减百</span>
                </p>
              </a>
            </div>
            <div class="hc-item">
              <a href="#">
                <img src="upload/promot-bg2.png" alt="">
                <img src="upload/promot-item2.webp" alt="">
                <p>母婴热卖</p>
                <p style="color: #A42AE0;">
                  <span>199减100</span>
                </p>
              </a>
            </div>
            <div class="hc-item">
              <a href="#">
                <img src="upload/promot-bg3.png" alt="">
                <img src="upload/promot-item3.webp" alt="">
                <p>电视家影</p>
                <p style="color: #fba600;">
                  <span>爆款5折抢</span>
                </p>
              </a>
            </div>
            <div class="hc-item">
              <a href="#">
                <img src="upload/promot-bg4.png" alt="">
                <img src="upload/promot-item4.webp" alt="">
                <p>手机通讯</p>
                <p style="color: #4BA093;">
                  <span>24期免息</span>
                </p>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- 推荐榜单 -->
      <div class="new-bd">
        <div class="title-img">
          <a href="#">
            <img src="images/title-img.png" alt="">
          </a>
        </div>
        <div class="newbd-list">
          <div class="bd-three">
            <!-- 1 -->
            <div class="bd-three-item">
              <a href="#">
                <img class="item-bg" src="images/item-bg-normal.png" alt="">
                <img class="pro-img" src="images/pro-img1.webp" alt="">
                <p class="three-name">
                  <span>趋势榜</span>
                </p>
                <p class="three-title">回味甘醇白酒榜</p>
                <p class="three-desc">本周趋势上升76%</p>
              </a>
            </div>
            <!-- 2,swiper-->
            <div class="bd-three-item mySwiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <a href="#">
                    <img class="item-bg" src="images/item-bg-swiper.png" alt="">
                    <img class="pro-img" src="images/pro-img2.webp" alt="">
                    <p class="three-name">
                      <span>趋势榜</span>
                    </p>
                    <p class="three-title">多功能电火锅榜</p>
                    <p class="three-desc">本月趋势上升97%</p>
                  </a>
                </div>
                <div class="swiper-slide">
                  <a href="#">
                    <img class="item-bg" src="images/item-bg-swiper.png" alt="">
                    <img class="pro-img" src="images/pro-img3.webp" alt="">
                    <p class="three-name">
                      <span>人气榜</span>
                    </p>
                    <p class="three-title">车载摄像头榜</p>
                    <p class="three-desc">今日热销爆款</p>
                  </a>
                </div>
                <div class="swiper-slide">
                  <a href="#">
                    <img class="item-bg" src="images/item-bg-swiper.png" alt="">
                    <img class="pro-img" src="images/pro-img4.webp" alt="">
                    <p class="three-name">
                      <span>人气榜</span>
                    </p>
                    <p class="three-title">品质书写榜</p>
                    <p class="three-desc">卖爆2033件</p>
                  </a>
                </div>
              </div>
            </div>
            <!-- 3 -->
            <div class="bd-three-item">
              <a href="#">
                <img class="item-bg" src="images/item-bg-normal.png" alt="">
                <img class="pro-img" src="images/pro-img5.webp" alt="">
                <p class="three-name">
                  <span>人气榜</span>
                </p>
                <p class="three-title">冬日取暖器榜</p>
                <p class="three-desc">卖爆7750件</p>
              </a>
            </div>
          </div>
          <div class="bd-two"></div>
        </div>
      </div>
      <div class="blank"></div>
      <!-- 猜你喜欢 -->
      <div class="guessUlike">
        <a href="#">
          <img src="images/guessUlike-title.webp" alt="">
        </a>
        <div class="pro-list-wrapper" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading">
          <div class="pro-list">
            <div class="left-list">
              <div class="product" v-for="(item,i) in productsl" :key="i">
                <a href="#" v-cloak>
                  <img class="proImg" :src="item.proImg" alt="">
                  <p class="pro-title">{{item.proTitle}}</p>
                  <p class="cuxiao-tag">
                    <img :class="item.tagType" :src="item.tagImg" alt="" v-if="item.tagImg">
                    <span class="cx-text" v-for="(text,ti) in item.cxText" :key="ti">{{text}}</span>
                  </p>
                  <div class="pro-price">
                    <div class="real-price">
                      <span class="flag">￥</span>
                      <span class="pre-price">{{item.realPrice.prePrice}}</span>
                      <span class="last-price">{{item.realPrice.lastPrice}}</span>
                      <span class="price-comments">{{item.realPrice.priceComments}}</span>
                    </div>
                  </div>
                </a>
              </div>
            </div>
            <div class="right-list">
              <div class="product" v-for="(item,i) in productsr" :key="i">
                <a href="#" v-cloak>
                  <img class="proImg" :src="item.proImg" alt="">
                  <p class="pro-title">{{item.proTitle}}</p>
                  <p class="cuxiao-tag">
                    <img :class="item.tagType" :src="item.tagImg" alt="" v-if="item.tagImg">
                    <span class="cx-text" v-for="(text,ti) in item.cxText" :key="ti">{{text}}</span>
                  </p>
                  <div class="pro-price">
                    <div class="real-price">
                      <span class="flag">￥</span>
                      <span class="pre-price">{{item.realPrice.prePrice}}</span>
                      <span class="last-price">{{item.realPrice.lastPrice}}</span>
                      <span class="price-comments">{{item.realPrice.priceComments}}</span>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
        <img src="images/bottom-snlogo.png" alt="">
      </div>

      <!-- 底部导航 -->
      <div class="bottom-nav">
        <a href="#">
          <img src="images/bottom-index.png" alt="">
          <span class="index">首页</span>
        </a>
        <a href="#">
          <img src="images/bottom-class.png" alt="">
          <span>分类</span>
        </a>
        <a href="#">
          <img src="images/bottom-rank.png" alt="">
          <span>排行榜</span>
        </a>
        <a href="#">
          <img src="images/bottom-cart.png" alt="">
          <span>购物车</span>
        </a>
        <a href="#">
          <img src="images/bottom-mine.png" alt="">
          <span>我的易购</span>
        </a>
      </div>
      <!-- 回到顶部按钮 -->
      <div id="top" @click="backTop" :style="showTop ? 'display: block;' : 'display: none;'"></div>
      <!-- to-login -->
      <div class="to-login">
        <a href="#">
          <img src="images/to-login.png" alt="">
        </a>
      </div>
      <!-- 签到红包 -->
      <div class="gift">
        <a href="#">
          <img src="images/gift.gif" alt="">
        </a>
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          isFixed: false,
          showTop: false,
          loading: false,
          d: 0,
          h: 0,
          m: 0,
          s: 0,
          productsl: [],
          productsr: [],
          productsL: [
            {
              proImg: 'upload/pro-img1.webp',
              proTitle: '好想你 香酥脆枣无核去核红枣办公室小吃零食 脆灰枣 230g',
              tagImg: '',
              cxText: ['包邮', '满2件免1件'],
              realPrice: {
                prePrice: '29',
                lastPrice: '.9',
                priceComments: '1900+评价'
              }
            },
            {
              proImg: 'upload/pro-img2.webp',
              proTitle: 'realme 真我Buds 经典版(有线耳机) 黑色 OPPO提供售后支持',
              tagImg: 'images/tag-img1.png',
              tagType: 'tag1',
              cxText: [],
              realPrice: {
                prePrice: '99',
                lastPrice: '',
                priceComments: '10+评价'
              }
            },
            {
              proImg: 'upload/pro-img3.webp',
              proTitle: '海尔(Haier)515升 对开门冰箱 AFR精控多路送风 DEO净味 双变频节能 家用电冰箱 BCD-515WDPD',
              tagImg: 'images/tag-img1.png',
              tagType: 'tag1',
              cxText: ['大聚惠'],
              realPrice: {
                prePrice: '2899',
                lastPrice: '',
                priceComments: '3.1万+评价'
              }
            },
            {
              proImg: 'upload/pro-img4.webp',
              proTitle: '茅台王子酒(金王子) 53度500ml 单瓶装 酱香型白酒',
              tagImg: 'images/tag-img1.png',
              tagType: 'tag1',
              cxText: ['大聚惠', '每338-70'],
              realPrice: {
                prePrice: '338',
                lastPrice: '',
                priceComments: '3100+评价'
              }
            },
            {
              proImg: 'upload/pro-img5.webp',
              proTitle: 'Apple iPhone 13 256G 星光色 移动联通电信5G全网通手机',
              tagImg: 'images/tag-img1.png',
              tagType: 'tag1',
              cxText: ['大聚惠'],
              realPrice: {
                prePrice: '6799',
                lastPrice: '',
                priceComments: '800+评价'
              }
            }
          ],
          // 
          productsR: [
            {
              proImg: 'upload/pro-img6.webp',
              proTitle: '花王Merries加大号拉拉裤XL号XL38片(12kg-22kg)',
              tagImg: 'images/tag-img2.png',
              tagType: 'tag2',
              cxText: ['大聚惠'],
              realPrice: {
                prePrice: '92',
                lastPrice: '',
                priceComments: '3.7万+评价'
              }
            },
            {
              proImg: 'upload/pro-img7.webp',
              proTitle: '江赫医用外科口罩独立包装100只成人一次性医用口罩灭菌无菌级防尘阻菌透气三层防护环氧乙烷灭菌消毒三层防护每只1袋装 100片',
              tagImg: '',
              tagType: '',
              cxText: ['满赠', '满1件打7.5折', '赠'],
              realPrice: {
                prePrice: '36',
                lastPrice: '.9',
                priceComments: '4600+评价'
              }
            },
            {
              proImg: 'upload/pro-img8.webp',
              proTitle: '【S】西门子(SIEMENS)10公斤 全自动变频滚筒洗衣机 家用大容量 高温筒清洁 智能感应 WM12P2682W',
              tagImg: 'images/tag-img1.png',
              tagType: 'tag1',
              cxText: ['大聚惠', '赠'],
              realPrice: {
                prePrice: '3699',
                lastPrice: '',
                priceComments: '5.6万+评价'
              }
            },
            {
              proImg: 'upload/pro-img9.webp',
              proTitle: '100只贻贝一次性医用面罩防护隔离成人儿童防飞沫口沫面罩三层防护含熔喷布防护隔离面罩',
              // tagImg: 'images/tag-img1.png',
              // tagType: 'tag1',
              // cxText: ['大聚惠', '赠'],
              realPrice: {
                prePrice: '12',
                lastPrice: '.9',
                priceComments: '16万+评价'
              }
            },
            {
              proImg: 'upload/pro-img10.webp',
              proTitle: '美的(Midea) 新一级 极酷升级版 1.5匹 大风口变频冷暖壁挂式空调挂机 以旧换新KFR-35GW/N8VHA1',
              tagImg: 'images/tag-img1.png',
              tagType: 'tag1',
              cxText: ['领券1000-30', '赠'],
              realPrice: {
                prePrice: '2599',
                lastPrice: '',
                priceComments: '3.9万+评价'
              }
            },
          ]
          // 
        }
      },
      created() {
        this.countDown()
      },
      mounted() {
        window.addEventListener('scroll', this.scrollChange)
      },
      methods: {
        scrollChange() {
          let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
          if (scrollTop > 625) {
            this.isFixed = true
          } else {
            this.isFixed = false
          }
          if (scrollTop > 853) {
            this.showTop = true
          } else {
            this.showTop = false
          }
        },
        backTop() {
          document.documentElement.scrollTop = 0
          window.pageYOffset = 0
          document.body.scrollTop = 0
        },
        loadMore() {
          setTimeout(() => {
            this.productsl = this.productsL
            this.productsr = this.productsR
            // console.log(this.productsL);
            this.loading = true
          }, 2500);
        },
        countDown() {
          // 设置当天中午12点为目标时间,超过则设为明天中午12点
          let mytime = 0
          if (dayjs().hour() < 12) {
            mytime = dayjs().hour(12).minute(0).second(0).millisecond(0)
          } else {
            mytime = dayjs().hour(12).minute(0).second(0).millisecond(0).add(24, 'hour')
          }
          this.d = mytime - dayjs()
          setInterval(() => {
            this.d -= 1000
          }, 1000)
        }
      },
      watch: {
        d(newV) {
          this.h = dayjs().hour(Math.floor(newV / (1000 * 60 * 60) % 24)).format('HH')
          this.m = dayjs().minute(Math.floor(newV / (1000 * 60) % 60)).format('mm')
          this.s = dayjs().second(Math.floor(newV / 1000 % 60)).format('ss')
          // console.log(this.d, this.h, this.m, this.s)
          if (newV == 0) {
            this.countDown()
          }
        }
      }
    })
    new Swiper('.mySwiper', {
      direction: 'vertical',
      autoplay: {
        delay: 4000
      },
      loop: true,
      allowTouchMove: false,
      speed: 1000
    })
  </script>
</body>

</html>